import React from 'react';
import isSroll from 'iscroll/build/iscroll-probe';
import { fetchActivitylist } from '../api';

export default class ActivityList extends React.PureComponent {
  state = {
    activityList: []
  }

  componentDidMount() {
    document.querySelector('.wrapper').addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    fetchActivitylist().then(({ data }) => {
      this.setState({ activityList: data }, () => {
        this.scroll = new isSroll('.wrapper', {
          mouseWheel: true,
          click: true,
          tap: true,
          scrollX: true,
          scrollY: false
        });
      })
    })
  }

  redirectDetail = ({ activity_id, title }) => {
    gloablMonitor(['首页-活动', title])
    this.props.history.push(`/activityDetail/${activity_id}`)
  }

  render() {
    const { activityList } = this.state;
    return (
      <div className="wrapper">
        <div className="main-banner scroller">
          {
            activityList.map((item, index) => (
              <div
                key={index}
                onClick={() => { this.redirectDetail(item) }}
              >
                <img src={item.thumb} alt="" />
              </div>
            ))
          }
        </div>
      </div>
    )
  }
}